<template>
  <el-card class="mainContainer" shadow="never">
    <div id="phaser-example"></div>
  </el-card>

</template>

<script setup>

import Phaser from 'phaser';
import logoImg from '@/assets/img.png';
import dude from '@/assets/svg/time.png';

let platforms;
let player;

class MyGame extends Phaser.Scene {
  constructor() {
    super();
  }

  preload() {
    //  This is an example of a bundled image:
    // this.load.image('logo', logoImg);

    //  This is an example of loading a static image from the public folder:
    this.load.image('background', logoImg );
    this.load.image('dude', dude );
  }

  create() {
    platforms = this.physics.add.staticGroup();
    platforms.create(400, 568, 'background').setScale(1.5).refreshBody();


    player = this.physics.add.sprite(100, 650, 'dude');
    // 设置角色的弹跳系数，接近0时弹跳次数越少，设为1时永远不停地弹
    player.setBounce(1);
    // 设置角色碰到世界的边界时是否检测碰到，是否将角色活动范围局限于可视的世界中。
    player.setCollideWorldBounds(true);

    this.anims.create({
      key: 'left',
      frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
      frameRate: 10,
      repeat: -1
    });

    this.anims.create({
      key: 'turn',
      frames: [ { key: 'dude', frame: 4 } ],
      frameRate: 20
    });

    this.anims.create({
      key: 'right',
      frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
      frameRate: 10,
      repeat: -1
    });

    // 向下的重力
    player.body.setGravityY(300);

    this.physics.add.collider(player, platforms);



    // this.tweens.add({
    //   targets: time,
    //   y: 450,
    //   duration: 2000,
    //   ease: "Power2",
    //   yoyo: true,
    //   loop: -1
    // });
  }
  update(time, delta) {
    super.update(time, delta);
    let cursors = this.input.keyboard.createCursorKeys();
    if (cursors.left.isDown){
      console.log(cursors)
    }
  }
}

const config = {
  type: Phaser.CANVAS,
  parent: 'phaser-example',
  width: 1000,
  height: 900,
  // 配置物理引擎
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 300 },
      debug: true
    }
  },
  // 可配置多个场景
  scene: [ MyGame ]
};

const game = new Phaser.Game(config);

console.log(game)




</script>


<style scoped lang="scss">

</style>
